<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="${resourceBase}/lib/H-ui/static/h-ui/css/H-ui.min.css"
    rel="stylesheet" type="text/css" />
<link href="${resourceBase}/lib/H-ui/static/h-ui/css/style.css"
    rel="stylesheet" type="text/css" />
<link href="${resourceBase}/lib/H-ui/lib/icheck/icheck.css"
    rel="stylesheet" type="text/css" />
<link
    href="${resourceBase}/lib/H-ui/lib/bootstrap-Switch/bootstrapSwitch.css"
    rel="stylesheet" type="text/css" />
<link
    href="${resourceBase}/lib/H-ui/lib/Hui-iconfont/1.0.1/iconfont.css"
    rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->

<title>WorkFlowDemo</title>
<meta name="keywords" content="关键词,5个左右,单个8汉字以内">
<meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">
</head>
<body>
    <header class="header">
        <nav class="mainnav Hui-wraper">
            <ul class="cl">
                <li><a href="${base}/viewDeployment">流程一览</a></li>
                <#list userList as user>
                    <#if user.role == 1>
                        <li><a href="${base}/viewPersonalRelatedProcessInfo?userId=${user.id}">程序-${user.name}</a></li>
                    <#elseif user.role == 2>
                        <li><a href="${base}/viewPersonalRelatedProcessInfo?userId=${user.id}">会计-${user.name}</a></li>
                    <#else>
                        <li><a href="${base}/viewPersonalRelatedProcessInfo?userId=${user.id}">经理-${user.name}</a></li>
                    </#if>
                </#list>
            </ul>
        </nav>
    </header>
    <section class="Hui-container">
        <nav class="breadcrumb">
            <i class="Hui-iconfont">&#xe67f;</i> <a href="/"
                class="c-primary">工作流引擎Demo</a><span class="c-gray en">&gt;</span><a
                href="#">程序</a><span class="c-gray en">&gt;</span><span
                class="c-gray">周一</span>
        </nav>
        <#if user.role == 1>
            <div class="Hui-wraper">
                <h2>开始一个流程</h2>
                <div class="line"></div>
                <form action="${base}/submitReimbursement" method="post"
                    class="form form-horizontal responsive" id="demoform-1">
                    <legend>申请报销</legend>
                    <input type="text" name="userId" value="${user.id}" style="display: none;">
                    <div class="row cl">
                        <label class="form-label col-2">报销标题：</label>
                        <div class="formControls col-10">
                            <input type="text" name="title"
                                class="input-text" autocomplete="off"
                                placeholder="帐号" value="申请报销-${user.name}-${.now?datetime}">
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-2">报销类型：</label>
                        <div class="formControls col-10">
                            <span class="select-box"> <select
                                class="select" size="1" name="type">
                                    <option value="1" selected="selected">餐费</option>
                                    <option value="2">车票</option>
                                    <option value="3">机票</option>
                            </select>
                            </span>
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-2">报销金额：</label>
                        <div class="formControls col-10">
                            <input type="text" name="amount"
                                class="input-text" autocomplete="off"
                                placeholder="金额">
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-2">说明：</label>
                        <div class="formControls col-10">
                            <textarea class="textarea" name="illustrate"
                                placeholder="说点什么..." rows="" cols=""
                                name=""></textarea>
                        </div>
                    </div>
                    <div class="row cl">
                        <div class="col-10 col-offset-2">
                            <input class="btn btn-primary radius"
                                type="submit" value="提交">
                        </div>
                    </div>
                </form>
            </div>
        </#if>
        <div class="Hui-wraper">
            <h2>我的待办任务</h2>
            <div class="line"></div>
            <#list taskVoList as taskVo>
                <table
                    class="table table-border table-bordered table-striped mt-20">
                    <thead>
                        <tr>
                            <th class="col1" colspan="5">任务：${taskVo.user.name} - ${taskVo.processInstance.businessKey} - ${taskVo.processInstance.processDefinitionId}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="col1">流程定义id：${taskVo.processInstance.processDefinitionId}</td>
                            <td class="col2">流程定义key：${taskVo.processInstance.processDefinitionKey}</td>
                            <td class="col3">业务key：${taskVo.processInstance.businessKey}</td>
                            <td class="col4">任务id：${taskVo.task.id}</td>
                            <td class="col5">任务开始时间：${taskVo.task.createTime?datetime}</td>
                        </tr>
                        <tr>
                            <td class="col1">业务id：${taskVo.reimbursementBusiness.id}</td>
                            <td class="col2">报销标题：${taskVo.reimbursementBusiness.title}</td>
                            <#if taskVo.reimbursementBusiness.type == 1>
                                <td class="col3">报销类型：餐费</td>
                            <#elseif taskVo.reimbursementBusiness.type == 2>
                                <td class="col3">报销类型：车票</td>
                            <#else>
                                <td class="col3">报销类型：机票</td>
                            </#if>
                            <td class="col4">报销金额：${taskVo.reimbursementBusiness.amount}</td>
                            <td class="col5">报销说明：${taskVo.reimbursementBusiness.illustrate}</td>
                        </tr>
                        <#if taskVo.commentList?size != 0>
                            <#list taskVo.commentList as comment>
                                <tr>
                                    <td class="col1" colspan="5">${comment.userId!''}批注：${comment.fullMessage} - ${comment.time?datetime}</td>
                                 </tr>
                            </#list>
                        <#else>
                            <tr>
                                <td class="col1" colspan="5">无批注</td>
                            </tr>
                        </#if>
                    </tbody>
                    <tfoot>
                        <#if user.role == 1>
                            <tr>
                                <td class="col1" colspan="5">
                                    <form action="${base}/reimbursementSubmiterCompleteTask">
                                        <input type="text" name="message" class="input-text radius size-M f-r" placeholder="批注" />
                                        <button class="btn btn-default radius f-r ml-10 mr-10 mt-10">修改（未实现）</button>
                                        <button type="submit" class="btn btn-default radius f-r ml-10 mr-10 mt-10">提交申请</button>
                                        <input type="text" name="userId" value="${user.id}" style="display: none;"/>
                                        <input type="text" name="taskId" value="${taskVo.task.id}" style="display: none;"/>
                                    </form>
                                </td>
                            </tr>
                        <#elseif user.role == 2>
                            <tr>
                                <td class="col1" colspan="5">
                                    <form id="wf-account-complete-task-form" action="${base}/reimbursementAccountingCompleteTask">
                                        <input type="text" name="message" class="input-text radius size-M f-r" placeholder="批注" />
                                        <button type="button" class="btn btn-default radius f-r ml-10 mr-10 mt-10" data-exception-bill="true" data-accept="false">异常报销</button>
                                        <button type="button" class="btn btn-default radius f-r ml-10 mr-10 mt-10" data-exception-bill="false" data-accept="false">拒绝报销</button>
                                        <button type="button" class="btn btn-default radius f-r ml-10 mr-10 mt-10" data-exception-bill="false" data-accept="true">同意报销</button>
                                        <input type="text" name="exceptionBill" value="false" style="display: none;"/>
                                        <input type="text" name="accept" value="false" style="display: none;"/>
                                        <input type="text" name="userId" value="${user.id}" style="display: none;"/>
                                        <input type="text" name="taskId" value="${taskVo.task.id}" style="display: none;"/>
                                    </form>
                                </td>
                            </tr>
                        <#else>
                            <tr>
                                <td class="col1" colspan="5">
                                    <form id="wf-manager-complete-task-form" action="${base}/reimbursementManagerCompleteTask">
                                        <input type="text" name="message" class="input-text radius size-M f-r" placeholder="批注" />
                                        <button type="button" class="btn btn-default radius f-r ml-10 mr-10 mt-10" data-accept="false">拒绝报销</button>
                                        <button type="button" class="btn btn-default radius f-r ml-10 mr-10 mt-10" data-accept="true">同意报销</button>
                                        <input type="text" name="accept" value="false" style="display: none;"/>
                                        <input type="text" name="userId" value="${user.id}" style="display: none;"/>
                                        <input type="text" name="taskId" value="${taskVo.task.id}" style="display: none;"/>
                                    </form>
                                </td>
                            </tr>
                        </#if>
                    </tfoot>
                </table>
            </#list>
        </div>
        <div class="Hui-wraper">
            <h2>我的历史任务</h2>
            <div class="line"></div>
            <#list historyTaskVoList as historyTaskVo>
                <table
                    class="table table-border table-bordered table-striped mt-20">
                    <thead>
                        <#if !historyTaskVo.reimbursementBusiness.result ??>
                            <tr style="background-color: #fcf8e3;">
                        <#elseif historyTaskVo.reimbursementBusiness.result == 1>
                            <tr style="background-color: #dff0d8;">
                        <#else>
                            <tr style="background-color: #f2dede;">
                        </#if>
                            <th class="col1" colspan="5">任务：${historyTaskVo.user.name} - ${historyTaskVo.historicProcessInstance.businessKey} - ${historyTaskVo.historicProcessInstance.processDefinitionId}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="col1">流程定义id：${historyTaskVo.historicProcessInstance.processDefinitionId}</td>
                            <td class="col2">业务key：${historyTaskVo.historicProcessInstance.businessKey}</td>
                            <td class="col3">任务id：${historyTaskVo.historicTaskInstance.id}</td>
                            <td class="col4">任务开始时间：${historyTaskVo.historicTaskInstance.createTime?datetime}</td>
                            <#if historyTaskVo.historicTaskInstance.endTime??>
                                <td class="col5">任务结束时间：${historyTaskVo.historicTaskInstance.endTime?datetime}</td>
                            <#else>
                                <td class="col5">任务结束时间：未结束</td>
                            </#if>
                        </tr>
                        <tr>
                            <td class="col1">业务id：${historyTaskVo.reimbursementBusiness.id}</td>
                            <td class="col2">报销标题：${historyTaskVo.reimbursementBusiness.title}</td>
                            <#if historyTaskVo.reimbursementBusiness.type == 1>
                                <td class="col3">报销类型：餐费</td>
                            <#elseif historyTaskVo.reimbursementBusiness.type == 2>
                                <td class="col3">报销类型：车票</td>
                            <#else>
                                <td class="col3">报销类型：机票</td>
                            </#if>
                            <td class="col4">报销金额：${historyTaskVo.reimbursementBusiness.amount}</td>
                            <td class="col5">报销说明：${historyTaskVo.reimbursementBusiness.illustrate}</td>
                        </tr>
                        <#if historyTaskVo.commentList?size != 0>
                            <#list historyTaskVo.commentList as comment>
                                <tr>
                                    <td class="col1" colspan="5">${comment.userId!''}批注：${comment.fullMessage} - ${comment.time?datetime}</td>
                                </tr>
                            </#list>
                        <#else>
                            <tr>
                                <td class="col1" colspan="5">无批注</td>
                            </tr>
                        </#if>
                    </tbody>
                </table>
            </#list>
        </div>
    </section>
    <footer class="footer"> </footer>
    <script type="text/javascript"
        src="${resourceBase}/lib/H-ui/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript"
        src="${resourceBase}/lib/H-ui/lib/layer/1.9.3/layer.js"></script>
    <script type="text/javascript"
        src="${resourceBase}/lib/H-ui/lib/laypage/1.2/laypage.js"></script>
    <script type="text/javascript"
        src="${resourceBase}/lib/H-ui/lib/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript"
        src="${resourceBase}/lib/H-ui/lib/icheck/jquery.icheck.min.js"></script>
    <script type="text/javascript"
        src="${resourceBase}/lib/H-ui/lib/bootstrap-Switch/bootstrapSwitch.js"></script>
    <script type="text/javascript"
        src="${resourceBase}/lib/H-ui/lib/Validform/5.3.2/Validform.min.js"></script>
    <script type="text/javascript"
        src="${resourceBase}/lib/H-ui/lib/Validform/5.3.2/passwordStrength-min.js"></script>
    <script type="text/javascript"
        src="${resourceBase}/lib/H-ui/static/h-ui/js/H-ui.js"></script>
    <script>
					$(function() {
						$('.skin-minimal input').iCheck({
							checkboxClass : 'icheckbox-blue',
							radioClass : 'iradio-blue',
							increaseArea : '20%'
						});
						$("#demoform").Validform({
							tiptype : 2
						});
						$("#wf-account-complete-task-form > button").click(function() {
							var exceptionBill = $(this).attr("data-exception-bill");
							var accept = $(this).attr("data-accept");
							$("#wf-account-complete-task-form > input[name = 'exceptionBill']").val(exceptionBill);
							$("#wf-account-complete-task-form > input[name = 'accept']").val(accept);
							$("#wf-account-complete-task-form").submit();
						});
						$("#wf-manager-complete-task-form > button").click(function() {
							var accept = $(this).attr("data-accept");
							$("#wf-manager-complete-task-form > input[name = 'accept']").val(accept);
							$("#wf-manager-complete-task-form").submit();
						});
					});
				</script>
</body>
</html>